<template>
    <div class="box">
      <!-- 嵌套列表拖拽 -->
      <draggable
        class="dragArea" 
        :list="tasks" 
        tag="ul"
        :group="{name: 'g1'}"
      >
        <li 
          v-for="el in tasks" 
          :key="el.name" 
        >
          <p>{{ el.name }}</p>
          <nested-draggable :tasks="el.tasks"></nested-draggable>
        </li>
      </draggable>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
import nestedDraggable from '@/components/nested-draggable.vue'
export default {
  name: 'nested-draggable',
  components: {
    draggable,
    nestedDraggable
  },
  props: {
    tasks: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
    }
  },
  computed: {
    dragOptions() {
      return {
        // 把animation改成200，就是另一种过渡效果
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: "ghost"
      }
    }
  },
  watch: {
  },
  created () {
  },
  mounted () { },
  methods: {
  }
}
</script>
<style scoped lang='less'>
li {
  list-style: none;
  text-align: left;
}
</style>
